package cn.edu.baiyunu.myapplication.ui.screens.transactions

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FilterList
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.zIndex
import androidx.hilt.navigation.compose.hiltViewModel
import cn.edu.baiyunu.myapplication.ui.components.GradientBackground
import cn.edu.baiyunu.myapplication.ui.components.Icon
import cn.edu.baiyunu.myapplication.ui.screens.transactions.components.EmptyTransactionDialog
import cn.edu.baiyunu.myapplication.ui.screens.transactions.components.FilterMenu
import cn.edu.baiyunu.myapplication.ui.screens.transactions.components.MonthSelector
import cn.edu.baiyunu.myapplication.ui.screens.transactions.components.TransactionEmptyState
import cn.edu.baiyunu.myapplication.ui.screens.transactions.components.TransactionGroupItem
import cn.edu.baiyunu.myapplication.ui.screens.transactions.viewmodel.TransactionsViewModel

/**
 * 交易列表屏幕
 */
@Composable
fun TransactionsScreen(
    navigateToTransaction: (String) -> Unit = {},
    navigateToAddTransaction: () -> Unit = {}, // 保留参数但不使用
    viewModel: TransactionsViewModel = hiltViewModel()
) {
    // 获取UI状态
    val uiState by viewModel.uiState.collectAsState()
    val groupedTransactions by viewModel.groupedTransactionsState.collectAsState()
    val allCategories by viewModel.allCategories.collectAsState(initial = emptyList())
    val filterState by viewModel.filterState.collectAsState()
    
    // 过滤菜单显示状态
    var showFilterMenu by remember { mutableStateOf(false) }
    
    // 删除确认对话框
    var showDeleteDialog by remember { mutableStateOf(false) }
    var transactionToDelete by remember { mutableStateOf<String?>(null) }
    
    // 删除确认对话框
    if (showDeleteDialog && transactionToDelete != null) {
        EmptyTransactionDialog(
            onDismiss = { 
                showDeleteDialog = false
                transactionToDelete = null
            },
            onConfirm = {
                transactionToDelete?.let { viewModel.deleteTransaction(it) }
                showDeleteDialog = false
                transactionToDelete = null
            }
        )
    }
    
    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        // 渐变背景
        GradientBackground()
        
        // 主内容
        Column(
            modifier = Modifier
                .fillMaxSize()
                .statusBarsPadding()
                .padding(horizontal = 20.dp)
        ) {
            // 顶部栏
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 20.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                // 标题居中
                Text(
                    text = "交易记录",
                    color = Color.White,
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Medium,
                    modifier = Modifier
                        .weight(1f),
                    maxLines = 1
                )
                
                // 筛选按钮
                Box(
                    modifier = Modifier
                        .size(40.dp)
                        .clip(CircleShape)
                        .background(Color.White.copy(alpha = 0.1f))
                        .clickable { showFilterMenu = true },
                    contentAlignment = Alignment.Center
                ) {
                    Icon(
                        imageVector = Icons.Default.FilterList,
                        contentDescription = "筛选",
                        tint = Color.White
                    )
                }
            }
            
            // 月份选择器
            MonthSelector(
                year = uiState.currentYear,
                month = uiState.currentMonth,
                onPreviousMonth = { viewModel.navigateToPreviousMonth() },
                onNextMonth = { viewModel.navigateToNextMonth() },
                modifier = Modifier.padding(bottom = 20.dp)
            )
            
            if (uiState.isEmpty) {
                // 显示空状态
                TransactionEmptyState()
            } else {
                // 交易列表
                LazyColumn(
                    modifier = Modifier.fillMaxWidth()
                ) {
                    items(groupedTransactions.entries.toList()) { (date, transactions) ->
                        TransactionGroupItem(
                            dateTimestamp = date,
                            transactions = transactions,
                            onTransactionClick = { transactionId ->
                                navigateToTransaction(transactionId)
                            },
                            modifier = Modifier.padding(bottom = 15.dp)
                        )
                    }
                    
                    // 底部添加足够的空间，避免内容被遮挡
                    item {
                        Spacer(modifier = Modifier.height(100.dp))
                    }
                }
            }
        }
        
        // 筛选菜单 - 将其置于Box内的右侧
        Box(
            modifier = Modifier
                .fillMaxHeight()
                .align(Alignment.TopEnd)
                .zIndex(10f)
        ) {
            FilterMenu(
                isVisible = showFilterMenu,
                allCategories = allCategories,
                currentFilter = filterState,
                onFilterChanged = { viewModel.setFilter(it) },
                onCloseClick = { showFilterMenu = false },
                onApplyClick = { showFilterMenu = false },
                onResetClick = {
                    viewModel.resetFilter()
                    showFilterMenu = false
                }
            )
        }
    }
}

/**
 * 交易删除确认对话框
 */
@Composable
fun EmptyTransactionDialog(
    onDismiss: () -> Unit,
    onConfirm: () -> Unit
) {
    // ... 这里实现删除确认对话框UI
    // 考虑到我们并未在界面上提供删除操作，此对话框暂时不实现具体内容
} 